<template>
  <div class="main-layout">
    <!-- 侧边栏组件 -->
    <Sidebar
      ref="sidebarRef"
      :sessions="sessions"
      :active-session="activeSession"
      :active-session-id="activeSessionId"
      @select="selectSession"
      @new="createSession"
      @toggle-collapse="handleSidebarToggle"
    />
    
    <main class="chat-area" :class="{ expanded: sidebarCollapsed }">
      <ChatWindow
        v-if="activeSession && activeSession.messages"
        ref="chatRef"
        :session="activeSession"
        @refresh-sessions="fetchSessions"
        @select-session="selectSession"
      />
    </main>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import Sidebar from '@/components/Sidebar.vue'
import ChatWindow from '@/components/ChatWindow.vue'
import axios from '@/utils/axios'
import { useRouter, useRoute } from 'vue-router'

const scrollMap = ref({})
const chatRef = ref(null)
const sidebarRef = ref(null)

const router = useRouter()
const route = useRoute()

const sessions = ref([])
const activeSession = reactive({})
const activeSessionId = ref(null)

const sidebarCollapsed = ref(false)




function handleSidebarToggle({ collapsed }) {
  sidebarCollapsed.value = collapsed
}

async function fetchSessions() {
  const res = await axios.get('/ai/seesionList')
  if (res.code === 200 && Array.isArray(res.data)) {
    sessions.value = res.data
  }
}

async function selectSession(session) {
  if (activeSession.sessionId && chatRef.value) {
    scrollMap.value[activeSession.sessionId] = chatRef.value.getScrollTop()
  }

  router.replace({ path: '/main', query: { sessionId: session.sessionId } })

  const res = await axios.get(`/ai/message/${session.sessionId}`)

  if (Array.isArray(res.data) && res.data.length > 0) {
    activeSession.messages = res.data
  }
  
  activeSession.sessionId = session.sessionId
  activeSession.title = session.title
  activeSessionId.value = session.sessionId

  await nextTick()
  if (chatRef.value && scrollMap.value[session.sessionId] !== undefined) {
    chatRef.value.setScrollTop(scrollMap.value[session.sessionId])
  } else if (chatRef.value) {
    chatRef.value.setScrollTop(99999)
  }
}

function createSession() {
  activeSession.sessionId = undefined
  activeSession.title = ''
  activeSession.messages = []
  activeSessionId.value = null
}

onMounted(async () => {
 
  await fetchSessions()
  const sessionId = route.query.sessionId
  let s = null
  if (sessionId && sessions.value.length) {
    s = sessions.value.find(x => String(x.sessionId) === sessionId)
  }
  if (s) {
    await selectSession(s)
  } else if (sessions.value.length) {
    await selectSession(sessions.value[0])
  }
})
</script>

<style scoped>
.main-layout {
  display: flex;
  height: 100vh;
  background: linear-gradient(135deg, #f6f8fc 0%, #f0f4f7 100%);
  position: relative;
}

.mobile-menu-btn {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1001;
  display: none;
}

.menu-toggle {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 0;
}

.chat-area.expanded {
  margin-left: 0;
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: block;
  }
  
  .chat-area {
    width: 100%;
  }
}
</style>
